<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>审核管理 - 1024导航后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        danger: '#EF4444',
                        warning: '#F59E0B',
                        info: '#3B82F6'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .stat-card {
                @apply bg-white rounded-xl shadow-sm p-5 transition-all duration-300 hover:shadow-md;
            }
            .table-row-hover {
                @apply hover:bg-gray-50 transition-colors;
            }
            .审核状态标签 {
                @apply px-2 py-1 text-xs font-medium rounded-full;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800 flex h-screen overflow-hidden">
    <!-- 侧边栏导航 -->
    <aside class="w-64 bg-white shadow-sm h-full border-r border-gray-200 flex-shrink-0 hidden md:block">
        <div class="p-5 border-b border-gray-200">
            <div class="text-primary text-xl font-bold">1024<span class="text-secondary">导航</span></div>
            <p class="text-xs text-gray-500 mt-1">管理员后台</p>
        </div>

        <nav class="p-4">
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-3">主菜单</p>
            <ul class="space-y-1">
                <li>
                    <a href="admin_index.html"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-tachometer w-5 text-center mr-3"></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="admin_resource_manager.html"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-th-large w-5 text-center mr-3"></i>
                        <span>资源管理</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="sidebar-active flex items-center px-3 py-3 text-sm rounded-md">
                        <i class="fa fa-check-square-o w-5 text-center mr-3"></i>
                        <span>审核管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-users w-5 text-center mr-3"></i>
                        <span>用户管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-comments w-5 text-center mr-3"></i>
                        <span>社区内容</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-bar-chart w-5 text-center mr-3"></i>
                        <span>数据统计</span>
                    </a>
                </li>
            </ul>

            <!-- 系统设置菜单 -->
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-3 mt-8">系统设置</p>
            <ul class="space-y-1">
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-cog w-5 text-center mr-3"></i>
                        <span>网站设置</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-shield w-5 text-center mr-3"></i>
                        <span>安全设置</span>
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm h-16 border-b border-gray-200 flex items-center justify-between px-6">
            <div class="flex items-center">
                <button class="md:hidden mr-4 text-gray-600" id="sidebarToggle">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-lg font-semibold">审核管理</h1>
            </div>

            <div class="flex items-center space-x-4">
                <!-- 通知按钮 -->
                <div class="relative">
                    <button class="text-gray-600 hover:text-primary transition-colors relative">
                        <i class="fa fa-bell text-xl"></i>
                        <span
                            class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">5</span>
                    </button>
                </div>

                <!-- 管理员信息 -->
                <div class="relative group">
                    <button class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像"
                            class="w-8 h-8 rounded-full object-cover">
                        <span class="text-sm font-medium hidden md:inline-block">管理员</span>
                        <i class="fa fa-angle-down text-gray-500"></i>
                    </button>
                    <div
                        class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 hidden group-hover:block">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">账号设置</a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 页面内容 -->
        <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
            <!-- 审核统计卡片 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="stat-card">
                    <div class="flex items-center justify-between mb-4">
                        <p class="text-gray-500 text-sm">待审核资源</p>
                        <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning">
                            <i class="fa fa-clock-o"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">24</h3>
                            <p class="text-danger text-xs flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 5 较昨日
                            </p>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="flex items-center justify-between mb-4">
                        <p class="text-gray-500 text-sm">今日已审核</p>
                        <div
                            class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                            <i class="fa fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">36</h3>
                            <p class="text-secondary text-xs flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 12 较昨日
                            </p>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="flex items-center justify-between mb-4">
                        <p class="text-gray-500 text-sm">已通过资源</p>
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-thumbs-up"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">1,156</h3>
                            <p class="text-secondary text-xs flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 15% 较上月
                            </p>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="flex items-center justify-between mb-4">
                        <p class="text-gray-500 text-sm">已拒绝资源</p>
                        <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger">
                            <i class="fa fa-thumbs-down"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">104</h3>
                            <p class="text-danger text-xs flex items-center mt-1">
                                <i class="fa fa-arrow-down mr-1"></i> 2% 较上月
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 审核筛选工具栏 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="flex flex-1 flex-col sm:flex-row gap-4">
                        <div class="relative flex-1 max-w-md">
                            <input type="text" placeholder="搜索资源名称、URL或提交者..."
                                class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>

                        <div class="flex gap-4">
                            <select
                                class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
                                <option value="">全部分类</option>
                                <option value="dev">开发工具</option>
                                <option value="design">设计资源</option>
                                <option value="education">学习教育</option>
                                <option value="entertainment">影音娱乐</option>
                                <option value="shopping">电商购物</option>
                                <option value="tools">实用工具</option>
                                <option value="images">图片素材</option>
                            </select>

                            <select
                                class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
                                <option value="pending">待审核</option>
                                <option value="approved">已通过</option>
                                <option value="rejected">已拒绝</option>
                            </select>
                        </div>
                    </div>

                    <button
                        class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                        <i class="fa fa-filter mr-2"></i> 筛选结果
                    </button>
                </div>
            </div>

            <!-- 审核列表 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-gray-50 border-b border-gray-200">
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-10">
                                    <input type="checkbox"
                                        class="rounded border-gray-300 text-primary focus:ring-primary">
                                </th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    ID</th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    资源名称</th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    分类</th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    提交者</th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    提交时间</th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    状态</th>
                                <th
                                    class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <!-- 待审核资源1 -->
                            <tr class="table-row-hover">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox"
                                        class="rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1025</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-code"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">在线 <a href="#"
                                                    class="hover:text-primary transition-colors">在线 在线API测试工具
                                                </a>
                                            </div>
                                            <div class="text-gray-500 text-xs mt-0.5 max-w-xs truncate">
                                                https://apitest.example.com
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">开发工具</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">user12345</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2小时前</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="审核状态标签 bg-amber-100 text-amber-800">待审核</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end space-x-2">
                                        <button
                                            class="text-xs px-3 py-1 bg-secondary text-white rounded hover:bg-secondary/90 transition-colors">
                                            通过
                                        </button>
                                        <button
                                            class="text-xs px-3 py-1 bg-danger text-white rounded hover:bg-danger/90 transition-colors reject-btn">
                                            拒绝
                                        </button>
                                        <button
                                            class="text-xs px-3 py-1 border border-gray-300 rounded text-gray-700 hover:bg-gray-50 transition-colors">
                                            详情
                                        </button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 待审核资源2 -->
                            <tr class="table-row-hover">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox"
                                        class="rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1026</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                            <i class="fa fa-paint-brush"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">
                                                <a href="#" class="hover:text-primary transition-colors">
                                                    免费图标下载网站
                                                </a>
                                            </div>
                                            <div class="text-gray-500 text-xs mt-0.5 max-w-xs truncate">
                                                https://freelcons.example.com
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">设计资源</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">designer88</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5小时前</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="审核状态标签 bg-amber-100 text-amber-800">待审核</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end space-x-2">
                                        <button
                                            class="text-xs px-3 py-1 bg-secondary text-white rounded hover:bg-secondary/90 transition-colors">
                                            通过
                                        </button>
                                        <button
                                            class="text-xs px-3 py-1 bg-danger text-white rounded hover:bg-danger/90 transition-colors reject-btn">
                                            拒绝
                                        </button>
                                        <button
                                            class="text-xs px-3 py-1 border border-gray-300 rounded text-gray-700 hover:bg-gray-50 transition-colors">
                                            详情
                                        </button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 已审核资源 -->
                            <tr class="table-row-hover">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox"
                                        class="rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1020</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-teal-100 flex items-center justify-center text-teal-600 mr-3">
                                            <i class="fa fa-image"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">
                                                <a href="#" class="hover:text-primary transition-colors">
                                                    无版权图库
                                                </a>
                                            </div>
                                            <div class="text-gray-500 text-xs mt-0.5 max-w-xs truncate">
                                                https://freestock.example.com
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">图片素材</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">photographer</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">昨天 14:30</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="审核状态标签 bg-green-100 text-green-800">已通过</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end space-x-2">
                                        <button
                                            class="text-xs px-3 py-1 border border-gray-300 rounded text-gray-700 hover:bg-gray-50 transition-colors">
                                            查看记录
                                        </button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 已拒绝资源 -->
                            <tr class="table-row-hover">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox"
                                        class="rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1019</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-red-100 flex items-center justify-center text-red-600 mr-3">
                                            <i class="fa fa-film"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900 line-through">
                                                <a href="#" class="hover:text-primary transition-colors">
                                                    影视资源站
                                                </a>
                                            </div>
                                            <div class="text-gray-500 text-xs mt-0.5 max-w-xs truncate">
                                                https://movies.example.com
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">影音娱乐</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">moviefan</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">昨天 09:15</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="审核状态标签 bg-red-100 text-red-800">已拒绝</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end space-x-2">
                                        <button
                                            class="text-xs px-3 py-1 border border-gray-300 rounded text-gray-700 hover:bg-gray-50 transition-colors">
                                            查看原因
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
                    <div class="flex items-center">
                        <p class="text-sm text-gray-500">
                            显示 <span class="font-medium">1</span> 到 <span class="font-medium">4</span> 条，共 <span
                                class="font-medium">24</span> 条
                        </p>
                        <div class="ml-4">
                            <select
                                class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <option>10条/页</option>
                                <option>20条/页</option>
                                <option>50条/页</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex items-center space-x-1">
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                            disabled>
                            <i class="fa fa-angle-left"></i>
                        </button>
                        <button
                            class="px-3 py-1 text-sm border border-primary bg-primary text-white rounded-md">1</button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">2</button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">3</button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 拒绝原因弹窗 -->
    <div id="rejectModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6 transform transition-all">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold">拒绝资源</h3>
                <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="mb-4">
                <p class="text-sm text-gray-600 mb-3">请选择拒绝原因（可多选）：</p>
                <div class="space-y-2">
                    <label class="flex items-center">
                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                        <span class="text-sm">内容不符合平台规范</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                        <span class="text-sm">存在版权问题</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                        <span class="text-sm">链接无法访问</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                        <span class="text-sm">内容重复</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                        <span class="text-sm">其他原因</span>
                    </label>
                </div>
            </div>
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-1">备注说明（选填）</label>
                <textarea rows="3"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                    placeholder="请输入拒绝的详细原因..."></textarea>
            </div>
            <div class="flex justify-end space-x-3">
                <button id="cancelReject"
                    class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button class="px-4 py-2 bg-danger text-white rounded-md hover:bg-danger/90 transition-colors">
                    确认拒绝
                </button>
            </div>
        </div>
    </div>

    <script>
        // 侧边栏切换（移动端）
        document.getElementById('sidebarToggle').addEventListener('click', () => {
            const sidebar = document.querySelector('aside');
            sidebar.classList.toggle('hidden');
            sidebar.classList.toggle('absolute');
            sidebar.classList.toggle('top-0');
            sidebar.classList.toggle('left-0');
            sidebar.classList.toggle('h-full');
            sidebar.classList.toggle('z-50');
        });

        // 拒绝弹窗控制
        const rejectModal = document.getElementById('rejectModal');
        document.querySelectorAll('.reject-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                rejectModal.classList.remove('hidden');
            });
        });

        document.getElementById('closeModal').addEventListener('click', () => {
            rejectModal.classList.add('hidden');
        });

        document.getElementById('cancelReject').addEventListener('click', () => {
            rejectModal.classList.add('hidden');
        });

        // 点击弹窗外部关闭
        rejectModal.addEventListener('click', (e) => {
            if (e.target === rejectModal) {
                rejectModal.classList.add('hidden');
            }
        });
    </script>
</body>

</html>